<template>
	<view class="nick-name">
		<view class="line"></view>
		<view class="title">抖音号只能修改一次</view>
		<view class="main">
			<view class="con">
				<input class="ipt" maxlength="12":disabled="canNumBeUpdated!==1" v-model="content" placeholder="请输入抖音号"/>
				<view class="total">
					{{content.length}}/12
				</view>
			</view>
			<view class="tips">注：抖音号的长度为6到12位</view>
		</view>
	</view>
</template>

<script setup>
	let serverUrl=getApp().globalData.severUrl
import { ref } from 'vue';
import {onNavigationBarButtonTap,onLoad} from "@dcloudio/uni-app"
const content=ref('')
let userInfo=uni.getStorageSync("userInfo")
let canNumBeUpdated=userInfo.canNumBeUpdated
content.value=userInfo.num
onLoad(()=>{
	if(canNumBeUpdated==0){
		let pageArr=getCurrentPages()
		let pageCurent=pageArr[pageArr.length-1]
		let curentWebView=pageCurent.$getAppWebview()
		curentWebView.setTitleNViewButtonStyle(0,{
			text:"",
			width:0
		})
	}
	
})
onNavigationBarButtonTap((e)=>{
	if(content.value===""){
		uni.showToast({
			title:"不能为空"
		})
		return;
	}
	uni.request({
		url:serverUrl+"/userInfo/modifyUserInfo?type=2",
		method:"POST",
		header:{
			headerUserId:uni.getStorageSync("userId"),
			headerUserToken: uni.getStorageSync("userToken")
		},
		data:{
			id:uni.getStorageSync("userId"),
			num:content.value
		},
		success(res){
			if(res.data.status==200){
				
				uni.navigateBack()
				uni.showToast({
					title:res.data.msg
				})
			}else{
				uni.showToast({
					title:res.data.msg
				})
			}
		}
	})
})
</script>

<style scoped lang="scss">
.nick-name{
	.line{
	   height: 1px;
	   background-color: #252731;
	}
	.con{
		display: flex;
		padding:30rpx 20rpx;
	}
	.ipt{
		background-color: #4A4C52;
		height: 80rpx;
		flex:1;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		padding-left: 10rpx;
	}
	.total{
		background-color: #4A4C52;
		width: 100rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		font-size: 28rpx;
		color: #ddd;
		padding-top: 40rpx;
	}
	.tips{
		padding:0 20rpx;
		color: #ddd;
	}
	.title{
		margin-top: 30rpx;
		padding:0 20rpx;
		color: #f80000;
	}
}
</style>
